<script setup lang="ts">
import { showSuccessToast, showToast } from 'vant'
import { ref } from 'vue'
import { codeRules, mobileRules, passwordRules } from '@/utils/rules'
import { loginByMobile, loginByPassword } from '@/services/user'
import { useUserStore } from '@/stores'
import { useRoute, useRouter } from 'vue-router'
import { useSendMobileCode } from '@/composable'

defineOptions({
  name: 'Login'
})

/**
 * 基本校验
 * form组件 事件submit	提交表单且验证通过后触发
 * van-field组件
 *    双向数据绑定(建议 看接口文档字段起名一致)
 *    name属性
 * van-button
 *    native-type="submit"才会触发submit事件
 *
 * 1. 手机号格式校验 - 正则
 * 2. 密码校验 - 正则 8~24个字符
 * 3. 勾选我已同意校验
 * 4. 提取rules utils里rules文件（所有的校验规则）
 *      4.1 利于复用
 *      4.2 利于维护
 */

const mobile = ref('13211112222')
const password = ref('abc12345')
const code = ref('')
const agree = ref(true)
/**
 * 登录功能 步骤
 * 1. 发送请求（封装接口）
 * 2. 成功提示
 * 3. 存token pinia 本地持久化
 * 4. 成功跳转页面 用户中心
 *      returnUrl
 *  4.1 如何获取url里的returnUrl？用route获取
 *  4.2 useRoute获取route
 *  4.3 通过route.query.returnUrl获取returnUrl 类型断言字符串
 *  4.4 如果存在 跳到returnUrl 不存在 个人中心
 */
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const onSubmit = async () => {
  if (!agree.value) return showToast('请勾选我已同意')
  const { data } = isPass.value
    ? await loginByPassword(mobile.value, password.value)
    : await loginByMobile(mobile.value, code.value)
  showSuccessToast('登录成功')
  userStore.setUser(data)
  // this.$router vue3没有this error
  // 这里用replace相对push更好，登录成功后销毁历史栈 回退不会到登录页
  const returnUrl = route.query.returnUrl as string
  // console.log(returnUrl)
  router.replace(returnUrl || '/user')
}

/**
 * 短信验证码切换功能
 * 需求
 *  1. 头部要切换文案
 *  2. 密码登录 手机号+密码 短信验证码登录 手机号+验证码（右侧小按钮发送验证码）
 * 步骤
 *  1. 定义变量做切换用 布尔值
 *  2. 点击a标签 切换  变量 = !变量
 *  3. 切换文案 双大括号 三目
 *  4. v-if v-else切换表单域 (发送验证码按钮添加)
 */
// isPass为true 密码登录 为false 短信验证码登录
const isPass = ref(true)
/**
 * 发送验证码
 * 1. 校验手机号
 *    form实例上的方法
 *      validate	验证表单，支持传入一个或多个 name 来验证单个或部分表单项，
 *      不传入 name 时，会验证所有表单项	name?: string | string[]
 *      返回值Promise<void>
 *
 *    通过 ref 可以获取到 Form 实例并调用实例方法
 * 2. 点击发送验证码请求(封装接口)
 * 3. 成功提示
 * 4. 倒计时
 *    4.1 改变状态（开始倒计时 还没倒计时）
 *        开关 time = 0
 *        大于0 开启倒计时
 *        等于0 初始状态或者结束了
 *    4.2 开启定时器 每秒执行一次
 *    4.3 关闭定时器
 *    4.4 关闭定时器除了到小于等于0的时候要关
 *        组件被卸载也需要关
 */

const { formRef, time, send } = useSendMobileCode(mobile)
// 控制显示密码-开关
const show = ref(false)
</script>

<template>
  <div class="login-page">
    <cp-nav-bar
      right-text="注册"
      @click-right="$router.push('/register')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isPass ? 'sf密码登录' : 'sf短信验证码登录' }}</h3>
      <a href="javascript:;" @click="isPass = !isPass">
        <span>{{ isPass ? 'sf短信验证码登录' : 'sf密码登录' }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form autocomplete="off" @submit="onSubmit" ref="formRef">
      <van-field
        placeholder="请输入手机号"
        type="tel"
        name="mobile"
        v-model="mobile"
        :rules="mobileRules"
      ></van-field>
      <van-field
        placeholder="请输入密码"
        :type="`${show ? 'text' : 'password'}`"
        name="password"
        v-model="password"
        :rules="passwordRules"
        v-if="isPass"
      >
        <template #button>
          <!-- 
            0. 定义个开关 show - false
            1. 点击icon切换
            2. password text要切换
           -->
          <cp-icon
            :name="`login-eye-${show ? 'on' : 'off'}`"
            @click="show = !show"
          ></cp-icon>
        </template>
      </van-field>
      <van-field
        placeholder="请输入验证码"
        name="code"
        v-model="code"
        v-else
        :rules="codeRules"
      >
        <!-- 右侧按钮 使用具名插槽 -->
        <template #button>
          <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
          <span class="btn-send" :class="{ active: time > 0 }" @click="send">{{
            time > 0 ? `${time}s后再发送` : '发送验证码'
          }}</span>
        </template>
      </van-field>

      <div class="cp-cell">
        <van-checkbox v-model="agree">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <van-button block round type="primary" native-type="submit"
          >登 录</van-button
        >
      </div>
      <div class="cp-cell">
        <a href="javascript:;">忘记密码？</a>
      </div>
    </van-form>
    <!-- 底部 -->
    <div class="login-other">
      <van-divider>第三方登录</van-divider>
      <div class="icon">
        <a
          @click="userStore.setReturnUrl($route.query.returnUrl as string)"
          href="https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fconsult-patients.itheima.net%2Flogin%2Fcallback"
        >
          <img src="@/assets/qq.svg" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
